<template>
  <div class="balance">
      <x-header :left-options="{showBack: true,  backText:''}">邀请有奖</x-header>
      <!-- <div class="head"><img src="/dist/static/img/hb1.png" alt=""></div>
      <div class="main">
        <img src="/dist/static/img/hb2.png" alt="">
        <p><span>￥</span>10</p>
      </div>
      <div class="link">
        <img src="/dist/static/img/hb3.png" alt="">
        <a href="#"></a>
        <a href="#"></a>
      </div>
      <div class="foot">  
       <img src="/dist/static/img/hb4.png" alt="">
       <div class="number"><input type="text" value="YXHH2000552541S0"></div>
      </div> -->
  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  },
  data:function(){
    return {
      info:'',
      toast:false
    }
  },
  methods: {
    report:function(){
      this.toast = true;
      var _this = this;
      setTimeout(function(){
        _this.toast = false
      },1500);
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.balance{
  margin-top:46px;
}
.balance div img{
  display:block;
  width:100%;
  height:auto;
}
.vux-header{
  background-color:#ff4d4d;
}
.main,.link,.foot{
  position: relative;
}
.main p{
  position: absolute;
  top:15%;
  left:50%;
  transform:translateX(-50%);
  font-size:48px;
  color:#ff4d4d;
}
.main p span{
  font-size:24px;
}
.link a:nth-child(2){
  display:block;
  position: absolute;
  top:0;
  width:100%;
  height:50%;
}
.link a:nth-child(3){
  display:block;
  position: absolute;
  bottom:0;
  top:50%;
  width:100%;
  height:50%;
}
.number{
  position: absolute;
  width:100%;
  top:0;
  bottom:0;
  left:0;
}
.number input{
  position: absolute;
  top:50%;
  transform:translateY(-46%);
  background-color:#fff;
  margin-left:10%;
  width:80%;
  font-size:16px;
  color:#3f3f3f;
  padding:5px 1.2px;
  border-radius:5px;
  outline:none;
  border:1px solid #bababa;
  text-indent:0.8rem;
}
</style>